import { SvgIcon } from '@/components/icon';
import { SearchOutlined } from '@ant-design/icons';
import { Dropdown, Input, Space } from 'antd';
import { MenuProps } from 'antd/lib';
import { t } from 'i18next';
import { useMemo, useState } from 'react';
import DeleteConfirmModal from '@/pages/datasets/components/DeleteConfirmModal';
import ResetPasswordModal from '@/pages/components/modal/ResetPasswordModal';
import { logout } from '@/pages/auth/authUtils';
import { useInitializeData } from '@/store/configStore';
interface props {
  changeIsMobile?: () => void;
  changeSearchValue: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

export default function MobileHeader({ changeIsMobile, changeSearchValue }: props) {
  const [passwordModalVisible, setPasswordModalVisible] = useState(false);
  const [logoutVisible, setLogoutVisible] = useState(false);

  const handleLogoutConfirm = () => {
    setLogoutVisible(false);
    logout();
  };

  const { license_edition, allowLocalAccount } = useInitializeData();
  const isLocalAccount = useMemo(() => {
    if (!license_edition) {
      return false
    } else {
      return allowLocalAccount ? true : false
    }
  }, [allowLocalAccount, license_edition]);

  const items: MenuProps['items'] = [
    ...(isLocalAccount ? [
      {
      key: '1',
      label: (
        <div className="h-[30px] w-[80px] text-center leading-[30px]">
          {t('page.homePage.changeInformation')}
        </div>
      ),
      onClick: () => {
        setPasswordModalVisible(true);
      },
    }] : []),

    {
      key: '2',
      label: (
        <div className="h-[30px] w-[80px] text-center leading-[30px]">
          {t('page.homePage.logOut')}
        </div>
      ),
      onClick: () => {
        setLogoutVisible(true);
      },
    },
  ];

  return (
    <>
      <div className="flex h-[50px] items-center  justify-between px-3">
        <div>
          <SvgIcon icon="ic-logo-three" size={206} />
        </div>
        <div className="flex items-center">
          {/* <SearchOutlined className="pr-3 text-[24px]  text-[#30343D]" onClick={changeIsMobile} /> */}
          <Dropdown trigger={['click']} menu={{ items }} arrow placement="bottomRight">
            <Space>
              <SvgIcon icon="ic-avatar" size="32" className="rounded-md" />
            </Space>
          </Dropdown>
        </div>

        <DeleteConfirmModal
          visible={logoutVisible}
          text="确定要退出登录吗?"
          onCancel={() => {
            setLogoutVisible(false);
          }}
          onConfirm={handleLogoutConfirm}
          onConfirmText="退出登录"
        />

        <ResetPasswordModal
          visible={passwordModalVisible}
          onCancel={() => setPasswordModalVisible(false)}
        />
      </div>
      <div className=" py-2">
        <Input
          onChange={(e) => {
            changeSearchValue(e);
          }}
          allowClear
          prefix={<SvgIcon icon="work-ic6" size={20} />}
          className=" h-[40px] !rounded-[6px] border !border-[#ffffff]"
          placeholder="搜索"
        />
      </div>
    </>
  );
}
